<!-- vue3学习 -->
<template>
    <h1 ref="bh1dom">{{ age1 }} : {{ age2 }}</h1>

</template>

<script>
import { ref, toRefs } from 'vue'

export default {
    name: 'Basic',
    props: {
        name: String,
        age: Number
    },
    setup(props) {
        // es6解构
        let { name: name1, age: age1 } = props;
        // console.log(name1, age1)

        // 响应式状态解构toRefs
        let { name: name2, age: age2 } = toRefs(props)
        // console.log(name2, age2)
        let bh1dom = ref(null)
        let color = 'red';

        return {
            age1,
            age2,
            bh1dom,
            color
        }
    }
}
</script>


<style>
:root {
    --vcolor: #ff0;
}
    h1 {
        color: var(--vcolor);  
        /* color:v-bind(color) */
    }

</style>